<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">

    </div>
    <div id = "hua"></div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js" type="text/javascript"></script>


<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">

    // class NameForm extends React.Component {
  
    //     state = {value: ''};

    //     handleChange = event => {
    //         //返回触发此事件的元素,也就是返回input
    //         console.log(event.target);
    //         this.setState({value: event.target.value});
    //     }

    //     handleSubmit = event => {
    //         alert('提交的名字: ' + this.state.value);
    //         event.preventDefault();
    //     }

    //     render() {
    //         return (
    //             <form onSubmit={this.handleSubmit}>
    //                 <label>
    //                 名字:
    //                 <input type="text" value={this.state.value} onChange={this.handleChange} />
    //                 </label>
    //                 <input type="submit" value="提交" />
    //             </form>
    //         );
    //     }
    // }
    // class FlavorForm extends React.Component {
    //     constructor(props) {
    //         super(props);
    //         this.state = {value: 'coconut'};

    //         this.handleChange = this.handleChange.bind(this);
    //         this.handleSubmit = this.handleSubmit.bind(this);
    //     }

    //     handleChange(event) {
    //         this.setState({value: event.target.value});
    //     }

    //     handleSubmit(event) {
    //         alert('你喜欢的风味是: ' + this.state.value);
    //         event.preventDefault();
    //     }

    //     render() {
    //         return (
    //         <form onSubmit={this.handleSubmit}>
    //             <label>
    //             选择你喜欢的风味:
    //             <select value={this.state.value} onChange={this.handleChange}>
    //                 <option value="grapefruit">葡萄柚</option>
    //                 <option value="lime">酸橙</option>
    //                 <option value="coconut">椰子</option>
    //                 <option value="mango">芒果</option>
    //             </select>
    //             </label>
    //             <input type="submit" value="提交" />
    //         </form>
    //         );
    //     }
    // }
    class Reservation extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            isGoing: true,
            numberOfGuests: 2
            };

            this.handleInputChange = this.handleInputChange.bind(this);
        }

        handleInputChange(event) {
            const target = event.target;
            console.log(target)
            const value = target.type === 'checkbox' ? target.checked : target.value;
            const name = target.name;
            
            console.log(name);
            console.log(value);
            this.setState({
                [name]: value
            });
        }

        render() {
            return (
            <form>
                <label>
                参与:
                <input
                    name="isGoing"
                    type="checkbox"
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                来宾人数:
                <input
                    name="numberOfGuests"
                    type="number"
                    value={this.state.numberOfGuests}
                    onChange={this.handleInputChange} />
                </label>
            </form>
            );
        }
    }
    //2.渲染组件
    ReactDOM.render(<Reservation />,document.getElementById("test"))
    ReactDOM.render(<input value = "这个是默认的，不能在进行修改" readOnly/>,document.getElementById("hua"));
    
</script>



</html>